<template>
  <div class="pc-home" v-if="!isphone">
    <div class="content">
      <h1>填写并核对订单信息</h1>
      <div class="content-from">
        <el-card shadow="hover" class="address">
          <h2><span>收货人信息</span></h2>
          <div class="address-container">
            <p style="line-height: 30px; font-size: 16px">
              <span>收货人电话:</span
              ><el-input
                v-model="phone"
                placeholder="电话号码"
                type="number"
              ></el-input>
            </p>
            <p style="line-height: 30px; font-size: 16px">
              <span>收货人地址:</span>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入正确的收货地址以防发错位置"
                v-model="address"
              >
              </el-input>
            </p>
          </div>
        </el-card>
        <el-card shadow="hover" class="pay">
          <h2>支付方式</h2>
          <el-col :span="8">
            <el-card shadow="hover" style="margin: 10px">
              <el-radio v-model="radio" label="1">支付宝</el-radio>
            </el-card>
          </el-col>
        </el-card>
        <el-card shadow="hover">
          <h2>订单信息</h2>
          <el-col :span="8" class="order-information">
            <el-card shadow="always" class="shop-list">
              <div class="hop-list-ones">
                <div class="hop-list-left">
                  <el-col :span="8" style="width: 100%">
                    <el-card shadow="hover">
                      <el-radio v-model="radio1" label="1" border>
                        <img src="@/assets/personalCenter/alipay.png" alt="" />
                        支付宝
                      </el-radio>
                    </el-card>
                  </el-col>
                  <el-col :span="8" style="width: 100%; margin-top: 10px">
                    <el-card shadow="hover">
                      <el-radio v-model="radio1" label="1" border>
                        快了吗国际快递
                      </el-radio>
                    </el-card>
                  </el-col>
                </div>
                <div
                  class="list"
                  style="
                    overflow-x: auto;
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                  "
                >
                  <div
                    class="hop-list-right"
                    v-for="item in curpdt"
                    :key="item.name"
                  >
                    <div>
                      <img :src="item.img[0]" alt="" />
                    </div>
                    <div>
                      <div>
                        <h3 style="line-height: 40px">
                          商品名字: {{ item.brand + item.name }}
                        </h3>
                        <p>商品详情:{{ item.desc }}</p>
                      </div>
                      <h3 style="line-height: 40px">
                        价格 :￥{{ item.price }}
                      </h3>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-card>
        <el-card shadow="hover">
          <h2 style="display: flex; justify-content: flex-end">
            总金额 : ￥{{ sum }}
          </h2>
        </el-card>
        <el-card shadow="hover">
          <div style="display: flex; justify-content: flex-end">
            <el-button type="primary" round @click.native="settlement()"
              >提交订单</el-button
            >
          </div>
        </el-card>
      </div>
    </div>
  </div>
  <div v-else class="phone-home">
    <!-- 头部 -->
    <van-nav-bar
      title="确认订单"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      class="order_header"
    />
    <div class="order_bgc">
      <!-- 收货人地址 -->
      <div class="order_loction">
        <van-cell class="cell-top main">
          <!-- 左图标 -->
          <template #icon>
            <van-icon
              name="location"
              size="16px"
              color="white"
              class="left-icon"
            />
          </template>
          <!-- title -->
          <template #title>
            <input type="text" placeholder="请输入收货地址" v-model="address" />
            <input type="text" placeholder="请输入收件人电话" v-model="phone" />
          </template>
          <!-- 右图标 -->
          <template #right-icon>
            <van-icon name="guide-o" class="right-icon" size="16px" />
          </template>
        </van-cell>

        <van-cell class="cell-bottom main">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #icon>
            <van-icon name="like" size="16px" color="white" class="left-icon" />
          </template>
          <!-- title -->
          <template #title>
            <p>给爱的人也送一份</p>
          </template>
          <!-- 右图标 -->
          <template #right-icon>
            <span>选择收货人</span>
            <van-icon name="guide-o" class="right-icon" size="16px" />
          </template>
        </van-cell>
      </div>
      <!-- 商品模块 -->
      <div class="order_good">
        <!-- title -->
        <div class="good_title main">
          <span>郭穗穗专卖店</span>
        </div>
        <!-- 商品 -->
        <van-card
          v-for="item in curpdt"
          :key="item.name"
          :num="item.count"
          :price="item.price"
          :desc="item.desc"
          :title="item.name.slice(0, 14)"
          :thumb="item.img[0]"
          class="main"
        >
        </van-card>
        <!-- 配送服务 -->
        <van-cell
          is-link
          title="配送服务"
          @click="show = true"
          class="pc main"
        />
        <van-action-sheet
          v-model="show"
          :actions="actions"
          cancel-text="取消"
          close-on-click-action
          @cancel="onCancel"
        />
        <p class="bbb main">111</p>
      </div>
      <!-- 金额模块 -->
      <div class="order_price">
        <!-- title -->
        <div class="price_title main">
          <span>价格明细</span>
        </div>
        <!-- 商品总价 -->
        <div class="price_all main">
          <!-- <span class="aa">9999</span> -->
          <span class="bb">合计件数:{{ total }}</span>
          <span class="cc">总价:￥{{ sum }}</span>
        </div>
        <!-- 首单有礼 -->
        <van-cell
          is-link
          title="首单有礼"
          @click="show = true"
          class="pc main"
        />
        <van-action-sheet
          v-model="show"
          :actions="actions"
          cancel-text="取消"
          close-on-click-action
          @cancel="onCancel"
        />
        <p class="bbb main">111</p>
        <!-- 商品总价 -->
        <div class="price_allall main">
          <span class="aa">合计:￥{{ sum }}</span>
          <!-- <span class="cc"></span> -->
        </div>
      </div>
      <!-- 支付模块 -->
      <div class="order_page">
        <!-- title -->
        <div class="page_title main">
          <span>支付</span>
        </div>
        <div class="wechat main">
          <van-icon
            name="alipay"
            class="left-icon"
            size="25px"
            color="#1989fa"
          />
          <span>支付宝</span>
          <van-checkbox v-model="checked"></van-checkbox>
        </div>
        <!-- <p class="aaa main">111</p>
        <div class="alipay main">
          <van-icon
            name="alipay"
            class="right-icon"
            size="25px"
            color="#1989fa"
          />
          <span>支付宝</span>
          <van-checkbox
            v-model="checkeda"
            checked-color="#ee0a24"
          ></van-checkbox>
        </div>
        <p class="bbb main">111</p> -->
      </div>
      <div class="aaaaaaaaaaaa"></div>
      <!-- 底部固定 -->
      <van-submit-bar
        :price="sum * 100"
        button-text="提交订单"
        @submit="settlement()"
      />
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { mapState } from 'vuex';
import { payfor } from '@/api/index';
export default {
  data() {
    return {
      show: false,
      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
      checked: true,
      checkeda: true,
      total: 0,
      sum: 0,
      address: '',
      phone: '',
      //pc
      input: '',
      textarea2: '',
      radio: '1',
      radio1: '1',
    };
  },
  methods: {
    onCancel() {
      Toast('取消');
    },
    settlement() {
      if (
        this.address == undefined ||
        this.address == '' ||
        this.phone == undefined ||
        this.phone == ''
      ) {
        Toast({
          message: '电话和地址不能为空哦',
          position: 'bottom',
        });
        return;
      }
      var obj = {
        address: this.address,
        phone: this.phone,
        sum: this.sum,
        goods: JSON.stringify(this.curpdt),
        email: sessionStorage.getItem('email'),
      };
      console.log(obj);
      payfor(obj).then((res) => {
        window.location.href = res.data.payUrl;
      });
    },
  },
  computed: {
    // 取出media中的isphone 其他页面按此方法取值
    // isphone为true时，手机端模板，否则网页端模板
    ...mapState('media', ['isphone']),
    ...mapState('carts', ['curpdt']),
  },
  created() {
    console.log(this.curpdt);
    this.curpdt.forEach((item) => {
      (this.total += item.count), (this.sum += item.price * item.count);
    });
  },
};
</script>

<style lang="scss" scoped>
//pc
.pc-home {
  width: 100%;
  .content {
    width: 1200px;
    // height: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    margin: 20px auto;
    padding: 10px;
    ::v-deep .el-card__body {
      flex-direction: column;
    }
    .content-from {
      // border: 1px solid;
      .content-from > .el-card {
        margin-bottom: 10px;
      }
      .address {
        display: flex;
        .address-container {
          margin: 10px;
        }
      }
      .order-information {
        margin: 10px;
        // border: 1px solid;
        width: 98%;
        .shop-list {
          margin-bottom: 10px;

          .hop-list-ones {
            width: 100%;
            display: flex;
            .hop-list-left {
              width: 20%;
              height: 100%;
              // border: 1px solid;
              img {
                width: 25px;
              }
            }
            .hop-list-right {
              width: 80%;
              height: 176px;
              // border: 1px solid;
              display: flex;
              padding: 5px;
              margin-left: 20px;
              img {
                height: 100%;
                margin-right: 20px;
              }
            }
          }
        }
      }
    }
  }
}

// 移动端
.phone-home {
  // text-align: center;

  // 头部
  .order_header {
    // background-color: #32789e;
  }

  // 主体部分大盒子
  .order_bgc {
    background-color: #f7f7f7;

    .main {
      width: 97%;
      margin: 0 auto;
    }

    // 收货人地址
    .order_loction {
      padding-top: 20px;

      .van-cell::after {
        border-bottom: none;
      }

      .cell-top {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        overflow: hidden;

        .left-icon {
          margin-top: 10px;
          width: 30px;
          height: 30px;
          line-height: 30px;
          background-color: rgb(255, 121, 73);
          overflow: hidden;
          border-radius: 30px;
        }

        .van-cell__title {
          text-align: left;
          color: rgb(0, 0, 0);

          input {
            text-indent: 20px;
            color: rgb(0, 0, 0);
          }
        }

        .right-icon {
          margin-top: 20px;
        }
      }

      .cell-bottom {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        overflow: hidden;

        .left-icon {
          margin-top: 10px;
          width: 30px;
          height: 30px;
          line-height: 30px;
          background-color: rgb(223, 155, 179);
          overflow: hidden;
          border-radius: 30px;
        }

        .van-cell__title {
          margin-top: 14px;
          text-align: left;
          text-indent: 20px;
        }

        span {
          margin-top: 14px;
          margin-right: 3px;
        }

        .right-icon {
          margin-top: 20px;
        }
      }
    }

    // 商品模块
    .order_good {
      padding-top: 20px;

      .good_title {
        background-color: #fff;
        text-align: left;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        text-indent: 30px;

        span {
          line-height: 50px;
          font-size: 18px;
          font-weight: 700;
          color: #000;
        }
      }

      .van-card {
        background-color: #fff;
      }

      // 配送模块
      .pc {
        padding-top: 20px;

        .van-cell__title {
          margin-top: 12px;
          text-align: left;
          text-indent: 20px;
        }

        .van-cell__right-icon {
          line-height: 56px;
        }
      }

      .bbb {
        background-color: #fff;
        color: #fff;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }
    }

    // 价格模块
    .order_price {
      text-align: center;
      padding-top: 20px;

      .price_title {
        background-color: #fff;
        text-align: left;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        text-indent: 30px;

        span {
          line-height: 50px;
          font-size: 18px;
          font-weight: 700;
          color: #000;
        }
      }

      .price_all {
        line-height: 30px;
        display: flex;
        background-color: #fff;
        font-size: 14px;
        padding-left: 30px;

        .bb {
          text-align: left;
          // width: 50%;
          font-size: 12px;
        }

        .cc {
          margin-left: 140px;
          font-weight: 500;
          font-size: 12px;
        }
      }

      // 首单有礼
      .pc {
        padding-top: 10px;

        .van-cell__title {
          font-weight: 500;
          color: #000;
          margin-top: 14px;
          text-align: left;
          text-indent: 16px;
        }
      }

      .bbb {
        background-color: #fff;
        color: #fff;
      }

      .price_allall {
        line-height: 30px;
        display: flex;
        background-color: #fff;
        font-size: 14px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

        .aa {
          text-indent: -26px;
          width: 30%;
          margin-left: 30px;
          font-weight: bold;
          color: orangered;
        }

        .cc {
          font-weight: 500;
          color: #000;
          width: 70%;
          text-indent: 190px;
        }
      }
    }

    // 支付模块
    .order_page {
      text-align: center;
      padding-top: 20px;

      .page_title {
        background-color: #fff;
        text-align: left;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        text-indent: 30px;

        span {
          line-height: 50px;
          font-size: 18px;
          font-weight: 700;
          color: #000;
        }
      }

      .wechat {
        background-color: #fff;
        text-align: left;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        text-indent: 16px;
        line-height: 28px;
        display: flex;
        padding-right: 13px;

        .left-icon {
          width: 20%;
        }

        span {
          width: 20%;
          font-weight: 500;
          color: #000;
          text-indent: -6px;
        }

        .van-checkbox {
          margin-left: 188px;

          .van-icon {
            width: 50px;
            height: 50px;
          }
        }
      }

      .aaa {
        background-color: #fff;
        color: #fff;
      }

      .alipay {
        background-color: #fff;
        text-align: left;
        text-indent: 16px;
        line-height: 28px;
        display: flex;

        .left-icon {
          width: 20%;
        }

        span {
          width: 20%;
          font-weight: 500;
          color: #000;
        }

        .van-checkbox {
          margin-left: 211px;
        }
      }

      .bbb {
        background-color: #fff;
        color: #fff;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }
    }

    .aaaaaaaaaaaa {
      margin-bottom: 55px;
      height: 20px;
    }

    ::v-deep .van-overlay {
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
}
</style>
